<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
	<script src="bootstrap-4.6.2-dist/js/jquery-3.5.1.slim.min.js"></script>
	<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
	<style>
        /* 消除内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        .music_hot {
            width: 350px;
            /* 水平居中 */
            margin: 50px auto 0;
        }

        a {
            /* 去掉下划线 */
            text-decoration: none;
        }

        .music_hot h3 {
            /* 设置文字不加粗 */
            font-weight: 100;
            height: 40px;
            line-height: 40px;
        }

        .music_hot h3 span {
            font-size: 28px;
        }

        .music_hot h3 span i {
            color: #00a7f6;
            /* 去掉斜体效果 */
            font-style: normal;
        }

        .music_hot h3 a {
            /* 右浮动 */
            float: right;
            font-size: 16px;
            color: #9c9e9c;
        }

        .music_hot .item {
            height: 98px;
            background-color: #f6f6f6;
            margin-top: 20px;
        }

        .music_hot .item .item-img {
            float: left;
            width: 98px;
            height: 98px;
            background-color: skyblue;
        }

        .music_hot .item .item-text {
            float: right;
            width: 232px;
            height: 98px;
            background-color: pink;
            /* ========添加小箭头 */
            background: url(../images/arrow.png) no-repeat right center;
        }

        /* ====== */
        .music_hot .item .item-text h4 {
            font-size: 14px;
            padding: 8px 0px;
        }

        .music_hot .item .item-text p {
            font-size: 14px;
            color: #555;
            line-height: 25px;
        }

        .music_hot .item .item-text p span {
            color: #999;
        }

        .music_hot .item .item-text p a {
            color: #555;
        }

        .music_hot .item .item-text p a:hover {
            color: #ff627f;
        }

        .music_hot .item .item-text p a:hover span {
            color: #ff627f;
        }
		.xx{
			margin-top: 10px;
		}
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
		<a class="navbar-brand" href="#"><img src="./images/tubiao.png" class="shouye"></a>
		<button class="navbar-toggler" type="button" data-toggle = "collapse" data-target = "#navtop">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navtop">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item">
					<a class="nav-link" href="index.html">发现音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">我的音乐</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">关注</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">商城</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="">音乐人</a>
				</li>
            </ul>
            <form  class=" form-inline my-2 mr-lg-0">
				<input class=" form-control mr-sm-0" type="diannao" placeholder="音乐/视频/用户"/>
				<button class="btn mr-3 bg-secondary" type="submit">搜索</button>
			</form>
			<a class="denglu mr-4" href="./denglu.html" id="name">登录/注册</a>
			<span id="time" class="red"></span>
		</div>
	</nav>
	<div class="recommend" id="id-top">
        <div class="container">
            <div class="recommend-box">
                <ul id="dhl">
                    <li id="xx"><a href="index.html">推荐</a></li>
                    <li id="xx"><a href="paihangbang.html">排行榜</a></li>
                    <li id="xx"><a href="gedan.html">歌单</a></li>
                    <li id="xx"><a href="#">主播电台</a></li>
                    <li id="xx"><a href="geshou.html">歌手</a></li>
                    <li id="xx"><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>
	<div class="music_hot">
        <h3>
            <span><i>热门</i>榜单</span>
            <a href="#">更多</a>
        </h3>
        <div class="item">
            <div class="item-img">
                <a href="#">
                    <img src="./images/biaosheng.png" alt="飙升榜" width="98">
                </a>
            </div>
            <div class="item-text">
                <h4>网易云飙升榜</h4>
                <p><a href="https://www.kugou.com/song/#hash=ABF52961025B59E8DA15822B7C06BC29&album_id=30616743"
                        target="_blank">1 .
                        隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                <p><a href="https://www.kugou.com/song/#hash=0F81E8E9BA21FB024F4B7BD26CE6EBD2&album_id=59154788"
                        target="_blank">2 .
                        把回忆拼好给你-<span>苏星婕</span></a></p>
            </div>
        </div>
        <div class="item">
            <div class="item-img">
                <a href="#">
                    <img src="./images/xinge.png" alt="TOP500" width="98">
                </a>
            </div>
            <div class="item-text">
                <h4>网易云新歌TOP500</h4>
                <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
            </div>
        </div>
        <div class="item">
            <div class="item-img">
                <a href="#">
                    <img src="./images/rege.png" alt="网络红歌榜" width="98">
                </a>
            </div>
            <div class="item-text">
                <h4>网易云网络红歌榜</h4>
                <p><a href="#">1 . 隔岸观火-<span>Li-2c(李楚楚)</span></a></p>
                <p><a href="#">2 . 把回忆拼好给你-<span>苏星婕</span></a></p>
            </div>
        </div>
    </div>
	<div id="box" class="container xx">
		<!-- 编辑评论区域 -->
		<div class="box_top">
		  <textarea
			id="comment"
			cols="80"
			rows="10"
			placeholder="请输入您的评论"
		  ></textarea>
		  <button id="btn">发布</button>
		</div>
		<!-- 已发布的评论区域 -->
		<ul id="comment_content">
		</ul>
	  </div>
	<footer class=" container">
		<ul class="list-unstyled row" >
			<li id="weibu">
				<img src="./images/d1.jpg" alt="" class=" wb">
				<p>音乐开放平台</p>
			</li>
			<li id="weibu">
				<img src="./images/d2.jpg" alt="" class=" wb">
				<p>云村交易所</p>
			</li >
			<li id="weibu">
				<img src="./images/d3.jpg" alt="" class=" wb">
				<p>X StudioAI歌手</p>
			</li>
			<li id="weibu">
				<img src="./images/d4.jpg" alt="" class=" wb">
				<p>用户认证</p>
			</li>
		</ul>
	</footer>
    <script>
		document.getElementById("name").innerHTML = `${localStorage.getItem("name")}`;
		var data = new Date();
		var year = data.getFullYear();
		var month = data.getMonth()+1;
		var day = data.getDate();
		document.getElementById("time").innerHTML = year+"年"+month+"月"+day+"日";
		var time,index = 0;
		var acc = ["./images/lunbo1.jpg","./images/lunbo2.jpg","./images/lunbo3.jpg","./images/lunbo4.jpg"]
		function shoupic(){
			document.getElementById("pic").src = acc[index%4];
			index++;
			clearTimeout(time);
			time = setTimeout("shoupic()",2000);
		}
		window.onload=shoupic;
		var dhl = document.querySelectorAll("#dhl li");
		dhl.forEach(item=>{
			item.onmouseenter=function(){
				dhl.forEach(i=>i.classList.remove("recommend-color"));
				item.classList.add("recommend-color");
			}
		})
		var dh = document.querySelectorAll("#weibu img");
		dh.forEach(item=>{
			item.onmouseenter=function(){
				dh.forEach(i=>i.style.width=100+"px");
				item.style.width=120+"px";
			}
		})
        // 页面加载时执行
        window.onload = function() {
            // 1.监听按钮的点击
            $('btn').onclick = function() {
                // 1.1 获取用户输入的内容
                var content = $('comment').value;
                // console.log(content);
 
                // 1.2 判断用户是否输入内容
                if(content.length === 0) {
                    alert('请输入内容！');
                    // 阻止代码继续执行
                    return;
                }
 
                // 1.3 创建li标签插入到ul中
                var newLi = document.createElement('li');
                // newLi.innerHTML = `${content}<a href="javascript:void(0)">删除</a>`;
                newLi.innerHTML = `${content}<a href="">删除</a>`;
                // $('comment_content').appendChild(newLi);
                // 最新评论在最上面插入
                // console.log($('comment_content').children);
                $('comment_content').insertBefore(newLi,$('comment_content').children[0]);
 
                // 1.4 清除输入框的内容
                $('comment').value = '';
 
                // 1.5 删除评论
                var delBtns = document.getElementsByTagName('a');
                for(var i = 0;i < delBtns.length; i++) {
                    delBtns[i].onclick = function() {
                        // 删除当前按钮对应的li标签
                        var msg = "您真的确定要删除吗？\n\n请确认！";
                        if(confirm(msg) === true) {
                            return true;
                        } else {
                            return false;
                        }
                        // 直接删除
                        // this.parentNode.remove();
                    }
                }
            }
        }
        // 获取id对应的标签的函数
        function $(id) {
            return typeof id === "string" ? document.getElementById(id) : null;
        }

	</script>
	
</body>
</html>